<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jsTree :: documentation</title>
	<link rel="stylesheet" type="text/css" href="prettify.css" />
	<script type="text/javascript" src="prettify.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
	html { margin:0; padding:0; }
	body { width:800px; margin:0 auto; padding:0; font-family:Verdana, Helvetica, Arial, Serif; font-size:10pt; color:#333; }
	a { text-decoration:none; }
	a:hover { text-decoration:underline; }
	h1, h2, h3, h4 { font-family:Georgia, Serif; margin:2em 0 0.5em 0; color:#8b0000; }
	p { line-height:1.5em; margin:0 0 0.5em 0; }
	.note { font-style:italic; color:gray; font-size:0.9em; }

	code, .source, .file, .var, .req, .opt, .val { font-family:Monospace; font-style:normal !important; font-size:9pt; }
	span.file { color:green; }
	span.var { color:navy; }
	span.req { color:red; cursor:pointer; }
	span.opt { color:green; cursor:pointer; }
	span.val { color:#C71585; }
	ol, ul { margin-top:0.5em; margin-bottom:0.5em; }
	li { line-height:1.5em; }
	.source { font-weight:bold; margin-top:1em; line-height:1.1em; background:gray; text-indent:5px; color:white; text-transform:uppercase; padding:4px 0 0 0; }
	code, pre { border:3px solid gray; padding:5px; display:block; margin:0 0 1em 0; }
	</style>
</head>
<body onload="prettyPrint();">
<div id="documentation">
<h1 id="inc">Getting started</h1>
<p>First of all you need to include jsTree's files in your code. Note, that you could use the minified version.<br />Only five files are <strong>required</strong>:</p>
<ul>
	<li><span class="file">source/_lib/jquery.js</span> - the <a href="http://jquery.com">jQuery</a> library.</li>
	<li><s><span class="file">source/_lib/jquery.listen.js</span></s> <sup>No longer need for versions 0.9.6 and up</sup> - <a href="http://plugins.jquery.com/project/Listen">jQuery listen plugin</a> - used for event delegation.</li>
	<li><span class="file">source/_lib/css.js</span> - a small collection of usefull css commands (those enable fast language switching, themes, etc).</li>
	<li><span class="file">source/tree_component.js</span></li>
	<li><span class="file">source/tree_component.css</span></li>
</ul>
<p class="note">NOTE: Once loaded jsTree also includes the CSS file of the theme you specified.</p>
<p style="margin-top:1em;">All other files are <strong>optional</strong> and needed only in certain scenarios:</p>
<ol>
	<li>XML data source. I will also need to include:
		<ul>
			<li><span class="file">source/_lib/sarissa.js</span> - part of the <a href="http://dev.abiss.gr/sarissa/">Sarissa</a> library (used for xsl transformations).</li>
			<li><span class="file">source/_lib/sarissa_ieemu_xpath.js</span> - same as above.</li>
			<li><span class="file">source/_lib/jquery.xslt.js</span> - <a href="http://jquery.glyphix.com/">jQuery XSLT plugin</a> - a jQuery wrapper for Sarissa.</li>
		</ul>
	</li>
	<li>Metadata stored inside nodes. If you don't know what this is - check out the examples.
		<ul>
			<li><span class="file">source/_lib/jquery.metadata.js</span> - <a href="http://plugins.jquery.com/project/metadata">jQuery metadata plugin</a></li>
		</ul>
	</li>
	<li>Cookie functionality needed. Also include:
		<ul>
			<li><span class="file">source/_lib/jquery.cookie.js</span> - <a href="http://plugins.jquery.com/project/cookie">jQuery cookie plugin</a></li>
		</ul>
	</li>
</ol>
<div class='source'>Example source</div>
<pre>&lt;!-- REQUIRED SCRIPTS AND STYLES --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;path-to-jsTree/tree_component.css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/css.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/jquery.listen.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/tree_component.js&quot;&gt;&lt;/script&gt;

&lt;!-- required for xml data type --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/sarissa.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/sarissa_ieemu_xpath.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/jquery.xslt.js&quot;&gt;&lt;/script&gt;
&lt;!-- required for metadata rule definitions --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/jquery.metadata.js&quot;&gt;&lt;/script&gt;
&lt;!-- required for cookie functionality --&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;path-to-jsTree/_lib/jquery.cookie.js&quot;&gt;&lt;/script&gt;
</pre>

<h1 id="create">Creating an instance</h1>
<p>Once the files are included and ready, you can go ahead and create an instance. As of version 0.9.5 there are two ways of creating an instance.</p>
<div class='source'><s>Method 1</s><sup>Only for 0.9.5 and below</sup></div>
<pre>var tree = new tree_component();
tree.init(<em>container_node</em>,[{ <em>options</em> }]);</pre>
<div class='source'>Method 2</div>
<pre>$(<em>container_node</em>).tree([{ <em>options</em> }]);</pre>
<div class='source'>Method 3</div>
<pre>var tree = $.tree_create();
tree.init(<em>container_node</em>,[{ <em>options</em> }]);</pre>
<p class="note">NOTE: For method 2 make sure you are using version 0.9.5 and above. For method 3 you should use 0.9.6 and above.</p>
<ul>
	<li>
		<span class="req" title="required">[REQ]</span> <span class="var">container_node</span><p>A jQuery object or the DOM node of the tree container.</p>
	</li>
	<li>
		<span class="opt" title="optional">[OPT]</span> <span class="var">options</span><p>A javascript object containing all the configurations for the tree that are different from the <a href="#defaults">defaults</a>.</p>
	</li>
</ul>

<h1 id="configuration">Configuration</h1>
<p>The <span class="var">options</span> object you pass at initialization contains all of the configuration options for the tree.</p>
<p style="font-weight:bold; font-size:1.2em;">You could save some time and pass only the properties that are different from the <a href="#defaults">defaults</a>.</p>
<ul>
	<li>
		<span class="var" id="cdata">data</span><p>A javascript object that contains all the options for the data source of the tree. For the correct format of the data - read the <a href="#ddata">data format section</a>.</p>
		<ul>
			<li>
				<span class="var" id="type">type</span><p>A string - the possible values are: <span class="val">predefined</span>, <span class="val">json</span>, <span class="val">xml_flat</span>, <span class="val">xml_nested</span>.<br />Default is <span class="val">"predefined"</span>.</p><p class="note">NOTE: The xml data types require sarissa and the jquery XSLT plugin.</p>
			</li>
			<li>
				<span class="var" id="method">method</span><p>A string - if the data is on an external file this method is used to fetch the file. The possible values are: <span class="val">"GET"</span> or <span class="val">"POST"</span>.<br />Default is <span class="val">"GET"</span>.</p>
			</li>
			<li>
				<span class="var" id="async">async</span><p>Boolean - is the data loaded at once or on demand? If set to <span class="val">true</span> a request will be made to the url you supplied in <span class="var">data</span>.<span class="var">url</span> each time a branch in the tree is opened, requesting its children.<br />Default is <span class="val">false</span>.</p>
			</li>
			<li>
				<span class="var" id="async_data">async_data</span><p>A function. Used together with <span class="var">data</span>.<span class="var">async</span>. If <span class="var">data</span>.<span class="var">async</span> is set to <span class="val">true</span> the object returned by this function will be sent along with the request as parameters (GET or POST depending on the value of <span class="var">data</span>.<span class="var">method</span>). The function receives a single argument that is the node being opened. <br />Default is <span class="val">function (NODE) { return { id : jQuery(NODE).attr("id") || 0 } }</span>.</p><p class="note">Meaning that the node id will be sent as a paramater to the server or if there is no id (for example when loading the initial tree) - 0 is passed.</p>
			</li>
			<li>
				<span class="var" id="url">url</span><p>A string - the path to a document containing the data. Not used if <span class="var">data</span>.<span class="var">type</span> is set to <span class="val">predefined</span> or if <span class="var">data</span>.<span class="var">type</span> is set to <span class="val">json</span> and <span class="var">data</span>.<span class="var">json</span> is passed.<br />Default is <span class="val">false</span>.</p>
			</li>
			<li>
				<span class="var" id="json">json</span><p>A javascript object - instead of loading a file you could pass a javascript object here to build the tree from. Only used if <span class="var">data</span>.<span class="var">type</span> is set to <span class="val">json</span>.<br />Default is <span class="val">false</span>.</p>
			</li>
		</ul>
	</li>
	<li>
		<span class="var" id="selected">selected</span><p>A string or an array of strings, which are the ids of the nodes to be selected once the tree has loaded.<br />Default is <span class="val">false</span>.</p><p class="note">NOTE: If you use the cookie functionality the user's preferences will override this setting.</p>
	</li>
	<li>
		<span class="var" id="opened">opened</span><p>An array of strings, which are the ids of the nodes to be opened once the tree has loaded.<br />Default is <span class="val">[]</span> (an empty array).</p><p class="note">NOTE: If you use the cookie functionality the user's preferences will override this setting.</p>
	</li>
	<li>
		<span class="var" id="languages">languages</span><p>An array of strings representing each language. The first in the array will be the default language (e.g. visible on load). <br />Default is <span class="val">[]</span> (an empty array - meaning no language versions).</p><p class="note">NOTE: The strings in this array will be used internally for CSS classes - make sure that they are valid CSS classnames.</p>
	</li>
	<li>
		<span class="var" id="path">path</span><p>A string - the path to jsTree's folder. If set to <span class="val">false</span> the script will autodetect. <br />Default is <span class="val">false</span>.</p>
	</li>
	<li>
		<span class="var" id="cookies">cookies</span><p>Controls the cookie functionality. If set to <span class="val">false</span> cookies are disabled, otherwise two cookies are created - <span class="val">_opened</span> and <span class="val">_selected</span>. <br /> As of version 0.9.6 if you set <span class="var">cookies.__cookie_name_here__</span> to false, this type of cookie is not created (for example <span class="var">cookie.selected</span>). The following options are available in the <span class="var">opts</span> property:</p>
		<ul>
			<li>
				<span class="var" id="prefix">prefix</span><p>A string that will be prepended to the name of the created cookies.</p>
			</li>
			<li>
				<span class="var" id="expires">expires</span><p>A javascript date that sets time of expiration.</p>
			</li>
			<li>
				<span class="var">path</span><p>A string that sets the path of the cookie.</p>
			</li>
			<li>
				<span class="var" id="domain">domain</span><p>A string that sets the domain of the cookie.</p>
			</li>
			<li>
				<span class="var" id="secure">secure</span><p>Boolean - is the cookie secure.</p>
			</li>
		</ul>
		<p>Default is <span class="val">false</span>.</p>
		<p class="note">NOTE: Requires jQuery cookie plugin.</p>
	</li>
	<li>
		<span class="var" id="ui">ui</span><p>A javascript object that contains a few options about the looks of the tree.</p>
		<ul>
			<li>
				<span class="var" id="dots">dots</span><p>Boolean - controls whether the dots linking parent to children nodes are shown initially.<br />Default is <span class="val">true</span>.</p>
			</li>
			<li>
				<span class="var" id="rtl">rtl</span><p>Boolean - is the tree in a right-to-left language initially? <br />Default is <span class="val">false</span>.</p>
			</li>
			<li>
				<span class="var" id="animation">animation</span><p>A number - the duration of the open/close animation, if set to <span class="val">0</span> there is no animation. <br />Default is <span class="val">0</span>.</p>
			</li>
			<li>
				<span class="var" id="scroll_spd">scroll_spd</span><p>A number - the speed at which the container scrolls when the user drags a node near the edge of the container. <br />Default is <span class="val">4</span>.</p>
				<p class="note">NOTE: Minimum value is 1.</p>
			</li>
			<li>
				<span class="var" id="hover_mode">hover_mode</span><p>Boolean - should the get_* functions (mainly used for keyboard shortcuts) change the focused node or only move the hover state? If set to <span class="val">true</span> only the hover state is moved. <br />Default is <span class="val">true</span>.</p>
			</li>
			<li>
				<span class="var" id="theme_path">theme_path</span><p>String - the path to jsTree's themes. If set to <span class="val">false</span> the theme folder is set to <span class="var">path + </span><span class="val">"themes/"</span>. <br />Default is <span class="val">false</span>.</p>
				<p class="note">NOTE: If you specify any icons in the data and the file name contains no <span class="val">/</span> it will be looked up in the current theme folder (<span class="var">theme_path + theme_name + </span><span class="val">/</span>).<br />So if you need to specify an icon that is in the same folder as the file displaying the tree use <span class="val">./icon.file</span></p>
			</li>
			<li>
				<span class="var" id="theme_name">theme_name</span><p>String - sets the tree's theme. This should be a name of a folder inside the <span class="var">theme_path</span>. If set to <span class="val">false</span> no theme is included, only images are looked up in <span class="var">theme_path</span>.<br />Default is <span class="val">"default"</span>.</p>
			</li>
			<li>
				<span class="var" id="context">context</span><p>Array or <span class="val">false</span> - whether to use the native context menu.<br />If set to <span class="val">false</span> there is no context menu. Below you can see the expected format. The <span class="var">visible</span> function on each element is called when showing the menu - if it returns <span class="val">false</span> - the item is shown as disabled, if it returns <span class="val">-1</span> the item is not shown. If the <span class="var">icon</span> does not contain a <span class="val">"/"</span> it is looked up in the current theme directory. The <span class="var">label</span> and <span class="var">action</span> functions are self explanatory. The <span class="val">"separator"</span> item can be used to group similar commands.<br />Default is:</p>
<pre>
[ 
	{
		id		: "create",
		label	: "Create", 
		icon	: "create.png",
		visible	: function (NODE, TREE_OBJ) { 
			if(NODE.length != 1) 
			return false; return TREE_OBJ.check("creatable", NODE); 
		}, 
		action	: function (NODE, TREE_OBJ) { 
			TREE_OBJ.create(false, NODE); 
		} 
	},
	"separator",
	{ 
		id		: "rename",
		label	: "Rename", 
		icon	: "rename.png",
		visible	: function (NODE, TREE_OBJ) { 
			if(NODE.length != 1) return false; 
			return TREE_OBJ.check("renameable", NODE); 
		}, 
		action	: function (NODE, TREE_OBJ) { 
			TREE_OBJ.rename(); 
		} 
	},
	{ 
		id		: "delete",
		label	: "Delete",
		icon	: "remove.png",
		visible	: function (NODE, TREE_OBJ) { 
			return TREE_OBJ.check("deletable", NODE); 
		}, 
		action	: function (NODE, TREE_OBJ) { 
			NODE.each(function () { 
				TREE_OBJ.remove(this); 
			}); 
		} 
	}
]
</pre>
			</li>
		</ul>
	</li>
	<li>
		<span class="var" id="lang">lang</span><p>A javascript object that contains standard strigs used in the code.</p>
		<ul>
			<li>
				<span class="var" id="new_node">new_node</span><p>String or Array - specifies the default text used in any newly created node (unless specified in the call to the <span class="var">create</span> function).<br />Default is <span class="val">"New Folder"</span>.</p>
			</li>
			<li>
				<span class="var" id="loading">loading</span><p>String - specifies the text used in the placeholder node, that appears while loading async data.<br />Default is <span class="val">"Loading ..."</span>.</p>
			</li>
		</ul>
	</li>
	<li>
		<span class="var" id="rules">rules</span><p>A javascript object that defines the behaviour of the tree.</p>
		<ul>
			<li>
				<span class="var" id="multiple">multiple</span><p>String or false - controls multiselection - possible values are:</p>
				<ul>
					<li><span class="val">"on"</span> - always multiselect - e.g. clicking a new node does not deselect the previously selected, clicking a selected node deselects it</li> 
					<li><span class="val">"ctrl"</span> - multiselect only when the Ctrl key is down</li>
					<li><span class="val">false</span> - no multiselect</li>
				</ul>
				<p>Default is <span class="val">false</span>.</p>
			</li>
			<li>
				<span class="var" id="metadata">metadata</span><p>String or false - specifies the attribute used for storing metadata. If set to <span class="val">false</span> - no metadata is used.<br />Default is <span class="val">false</span>.</p>
				<p class="note">NOTE: using metadata requires jQuery metadata plugin.</p>
			</li>
			<li>
				<span class="var" id="type_attr">type_attr</span><p>String - specifies the attribute containing the type of the node (used for rule checking).<br />Default is <span class="val">"rel"</span>.</p>
				<p class="note">NOTE: if using metadata this setting has no effect if the <span class="var">type</span> property of the data object is set.</p>
			</li>
			<li>
				<span class="var" id="multitree">multitree</span><p>Boolean - controls drag &amp; drop between trees. If set to <span class="val">false</span> - drag &amp; drop is restricted to the current tree.<br />Default is <span class="val">false</span>.</p>
			</li>
			<li>
				<span class="var" id="createat">createat</span><p>String - controls where new nodes are inserted in the context of their parent. Shoud be <span class="val">"top"</span> or <span class="val">"bottom"</span>.<br />Default is <span class="val">"bottom"</span>.</p>
			</li>
			<li>
				<span class="var" id="use_inline">use_inline</span><p>Boolean - should inline rules be checked? The inline rules are set in the metadata of the node. This enables you to set individual properties on nodes (for example: <span class="var">clickable</span> (boolean), <span class="var">renameable</span> (boolean), etc). Also these three are available only as inline rules:</p>
				<ul>
					<li><span class="var" id="valid_children">valid_children</span> - array of strings - valid children types</li>
					<li><span class="var" id="max_children">max_children</span> - integer - the maximum of direct children allowed in this node</li>
					<li><span class="var" id="max_depth">max_depth</span> - integer - the maximum of levels allowed below this node.</li>
				</ul>
				<p>Default is <span class="val">false</span>.</p>
				<p class="note">NOTE: Requires jQuery metadata plugin.</p>
			</li>
			<li><span class="var" id="clickable">clickable</span><p>Nodes selectable by the user. Possible values are <span class="val">"all"</span>, <span class="val">"none"</span> or an array strings, each representing a node type.<br />Default is <span class="val">"all"</span>.</p></li>
			<li><span class="var" id="renameable">renameable</span><p>Nodes renameable by the user. Possible values are <span class="val">"all"</span>, <span class="val">"none"</span> or an array strings, each representing a node type.<br />Default is <span class="val">"all"</span>.</p></li>
			<li><span class="var" id="deletable">deletable</span><p>Nodes deletable by the user. Possible values are <span class="val">"all"</span>, <span class="val">"none"</span> or an array strings, each representing a node type.<br />Default is <span class="val">"all"</span>.</p></li>
			<li><span class="var" id="creatable">creatable</span><p>Nodes the user can create new nodes in. Possible values are <span class="val">"all"</span>, <span class="val">"none"</span> or an array strings, each representing a node type.<br />Default is <span class="val">"all"</span>.</p></li>
			<li><span class="var" id="draggable">draggable</span><p>Nodes draggable by the user. Possible values are <span class="val">"all"</span>, <span class="val">"none"</span> or an array strings, each representing a node type.<br />Default is <span class="val">"none"</span>.</p></li>
			<li>
				<span class="var" id="dragrules">dragrules</span><p>Defines the allowed nesting configurations. Possible values are <span class="val">"all"</span>, <span class="val">"none"</span> or an array strings, each representing a rule. Each rule consists of three parts:</p>
				<ul>
					<li>node_type_name</li>
					<li>position - one of <span class="val">"inside"</span>, <span class="val">"before"</span> and <span class="val">"after"</span></li>
					<li>node_type_name</li>
				</ul>
				<p>Default is <span class="val">"none"</span>.</p>
				<p class="note">NOTE: As of version 0.8 a wildcard <span class="val">*</span> may substitute any of the three parts.</p>
				<pre>[ &quot;folder * folder&quot; ] or [ &quot;* inside folder&quot; ] or [ &quot;* * folder&quot; ]</pre>
				<p>&nbsp;</p>
				<p class="note">NOTE: As of version 0.9.5 a <span class="val">!</span> in the begining of the rule negates it - thus making it invalid.</p>
				<pre>[ &quot;!folder inside folder&quot; ]</pre>
				<p>&nbsp;</p>
			</li>
			<li>
				<span class="var" id="drag_copy">drag_copy</span><p>String or false - controls the moving behavior - possible values are:</p>
				<ul>
					<li><span class="val">"on"</span> - always copy - e.g. moving nodes leaves the origin nodes in place and inserts a copy at the new location</li> 
					<li><span class="val">"ctrl"</span> - copy only when the Ctrl key is down, otherwise move</li>
					<li><span class="val">false</span> - no copy</li>
				</ul>
				<p>Default is <span class="val">false</span>.</p>
			</li>
			<li>
				<span class="var" id="droppable">droppable</span><p>Array of strings - each representing a class name that is droppable on the tree - this is used for allowing foreign (non-tree) items to be dropped on the tree.<br />Default is <span class="val">[]</span>.</p>
			</li>
		</ul>
	</li>
	<li>
		<span class="var" id="callback">callback</span><p>A javascript object, containing only functions that are executed on certain events within the tree. You can use them to attach your custom logic.<br />Defaults: all of the functions are empty ones, only the doubleclick function defaults to open/close (invert the state) and select the node involved.</p>
		<ul>
			<li><span class="var" id="beforechange">beforechange</span><p><strong>Arguments:</strong> the node about to be selected, the tree object.<br />Executed before a change of selection occurs. If you return <span class="val">false</span> in this function the change does not happen.</p></li>
			<li><span class="var" id="beforeopen">beforeopen</span><p><strong>Arguments:</strong> the node about to be opened, the tree object.<br />Executed before a node is opened. If you return <span class="val">false</span> in this function the open does not happen.</p></li>
			<li><span class="var" id="beforeclose">beforeclose</span><p><strong>Arguments:</strong> the node about to be closed, the tree object.<br />Executed before a node is closed. If you return <span class="val">false</span> in this function the close does not happen.</p></li>
			<li><span class="var" id="beforemove">beforemove</span><p><strong>Arguments:</strong> the node about to be moved, the reference node in the move, the new location of the node - before, after or inside the reference node, the tree object.<br />Executed before the move occurs, if you return <span class="val">false</span> - you prevent the move.</p></li>
			<li><span class="var" id="beforecreate">beforecreate</span><p>Same as above, but fires before creation of a node.</p></li>
			<li><span class="var" id="beforerename">beforerename</span><p><strong>Arguments:</strong> the node about to be renamed, the current language of the tree (if language versions are used), the tree object.<br />Executed before the rename occurs - return <span class="val">false</span> to prevent the rename.</p></li>
			<li><span class="var" id="beforedelete">beforedelete</span><p><strong>Arguments:</strong> the node to be deleted, the tree object.<br />Executed before the delete - return <span class="val">false</span> to prevent the delete.</p></li>
			<li><span class="var" id="onchange">onchange</span><p><strong>Arguments:</strong> the node that was focused, the tree object.<br />Executed each time a node is selected or deselected.</p></li>
			<li><span class="var" id="onselect">onselect</span><p><strong>Arguments:</strong> the node that was selected, the tree object.<br />Executed each time a node is selected.</p></li>
			<li><span class="var" id="ondeselect">ondeselect</span><p><strong>Arguments:</strong> the node that was deselected, the tree object.<br />Executed each time a node is deselected.</p></li>
			<li><span class="var" id="onrename">onrename</span><p><strong>Arguments:</strong> the node that was renamed, the current language of the tree (if language versions are used), the tree object.<br />Executed after a rename.</p></li>
			<li><span class="var" id="onmove">onmove</span><p><strong>Arguments:</strong> the node that was moved, the reference node in the move, the new location of the node - before, after or inside the reference node, the tree object.<br />Executed once the move completes and the node is already rendered in its new position.</p></li>
			<li><span class="var" id="oncopy">oncopy</span><p>Same as above but fires after a copy operation.</p></li>
			<li><span class="var" id="oncreate">oncreate</span><p>Same as above but fires after a create operation.</p></li>
			<li><span class="var" id="ondelete">ondelete</span><p><strong>Arguments:</strong> the node that was deleted, the tree object.<br />Executed after a node is deleted (removed from the tree).</p></li>
			<li><span class="var" id="onopen">onopen</span><p><strong>Arguments:</strong> the node that was opened, the tree object.<br />Executed after an open operation completes (meaning that if <span class="var">data.async</span> is set to <span class="val">true</span> this function will execute <strong>AFTER</strong> the content returned from the server and displayed).</p></li>
			<li><span class="var" id="onopen_all">onopen_all</span><p><strong>Arguments:</strong> the tree object.<br />Executed after an open_all operation completes (meaning that if <span class="var">data.async</span> is set to <span class="val">true</span> this function will execute <strong>AFTER</strong> the content returned from the server and displayed).</p></li>
			<li><span class="var" id="onclose">onclose</span><p><strong>Arguments:</strong> the node that was closed, the tree object.<br />Executed when a node is closed.</p></li>
			<li><span class="var" id="error">error</span><p><strong>Arguments:</strong> the error string, the tree object.<br />Executed whenever an error occurs (the user tries to perform a restricted operation).</p></li>
			<li><span class="var" id="onrgtclk">onrgtclk</span><p><strong>Arguments:</strong> the node that was rightclicked, the tree object, the event object.<br />Executed when the user right clicks a node.</p><p class="note">NOTE: to prevent the browser context menu from showing use this at the end of your function:<br /><span class="var">event.preventDefault(); event.stopPropagation(); return false</span>.</p></li>
			<li><span class="var" id="onload">onload</span><p><strong>Arguments:</strong> the tree object.<br />Executes once the tree loads or after a <span class="var">refresh()</span> completes.</p></li>
			<li><span class="var" id="onfocus">onfocus</span><p><strong>Arguments:</strong> the tree object.<br />Executes when the tree receives focus.</p></li>
			<li><span class="var" id="ondrop">ondrop</span><p><strong>Arguments:</strong> the foreign node that was dropped, the reference node in the drop, the location of the foreign node - before, after or inside the reference node, the tree object.<br />Executed once the drop completes (mouseup).</p><p class="note">NOTE: foreign nodes are not automatically inserted in the tree.</p></li>
			<li><span class="var" id="ondblclk">ondblclk</span><p><strong>Arguments:</strong> the node that was double-clicked, the tree object.<br />Executes after a double click on a node. Defaults to open/close (invert the state) and select the node.</p></li>
		</ul>
	</li>
</ul>

<div class="source" id="defaults">Configuration defaults</div>
<pre>{
	data	: {
		type	: "predefined",	// ENUM [json, xml_flat, xml_nested, predefined]
		method	: "GET",		// HOW TO REQUEST FILES
		async	: false,		// BOOL - async loading onopen
		async_data : function (NODE) { return { id : $(NODE).attr("id") || 0 } }, // PARAMETERS PASSED TO SERVER
		url		: false,		// FALSE or STRING - url to document to be used (async or not)
		json	: false			// FALSE or OBJECT if type is JSON and async is false - the tree dump as json
	},
	selected	: false,		// FALSE or STRING or ARRAY
	opened		: [],			// ARRAY OF INITIALLY OPENED NODES
	languages	: [],			// ARRAY of string values (which will be used as CSS classes - so they must be valid)
	path		: false,		// FALSE or STRING (if false - will be autodetected)
	cookies		: false,		// FALSE or OBJECT (prefix, open, selected, opts - from jqCookie - expires, path, domain, secure)
	ui		: {
		dots		: true,		// BOOL - dots or no dots
		rtl			: false,	// BOOL - is the tree right-to-left
		animation	: 0,		// INT - duration of open/close animations in miliseconds
		hover_mode	: true,		// SHOULD get_* functions chage focus or change hovered item
		scroll_spd	: 4,
		theme_path	: false,	// Path to themes
		theme_name	: "default",// Name of theme
		context		: [ 
			{
				id		: "create",
				label	: "Create", 
				icon	: "create.png",
				visible	: function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("creatable", NODE); }, 
				action	: function (NODE, TREE_OBJ) { TREE_OBJ.create(false, TREE_OBJ.selected); } 
			},
			"separator",
			{ 
				id		: "rename",
				label	: "Rename", 
				icon	: "rename.png",
				visible	: function (NODE, TREE_OBJ) { if(NODE.length != 1) return false; return TREE_OBJ.check("renameable", NODE); }, 
				action	: function (NODE, TREE_OBJ) { TREE_OBJ.rename(); } 
			},
			{ 
				id		: "delete",
				label	: "Delete",
				icon	: "remove.png",
				visible	: function (NODE, TREE_OBJ) { var ok = true; $.each(NODE, function () { if(TREE_OBJ.check("deletable", this) == false) ok = false; return false; }); return ok; }, 
				action	: function (NODE, TREE_OBJ) { $.each(NODE, function () { TREE_OBJ.remove(this); }); } 
			}
		]
	},
	rules	: {
		multiple	: false,	// FALSE | CTRL | ON - multiple selection off/ with or without holding Ctrl
		metadata	: false,	// FALSE or STRING - attribute name (use metadata plugin)
		type_attr	: "rel",	// STRING attribute name (where is the type stored if no metadata)
		multitree	: false,	// BOOL - is drag n drop between trees allowed
		createat	: "bottom",	// STRING (top or bottom) new nodes get inserted at top or bottom
		use_inline	: false,	// CHECK FOR INLINE RULES - REQUIRES METADATA
		clickable	: "all",	// which node types can the user select | default - all
		renameable	: "all",	// which node types can the user select | default - all
		deletable	: "all",	// which node types can the user delete | default - all
		creatable	: "all",	// which node types can the user create in | default - all
		draggable	: "none",	// which node types can the user move | default - none | "all"
		dragrules	: "all",	// what move operations between nodes are allowed | default - none | "all"
		drag_copy	: false,	// FALSE | CTRL | ON - drag to copy off/ with or without holding Ctrl
		droppable	: []
	},
	lang : {
		new_node	: "New folder",
		loading		: "Loading ..."
	},
	callback	: {				// various callbacks to attach custom logic to
		// before focus  - should return true | false
		beforechange: function(NODE,TREE_OBJ) { return true },
		beforeopen	: function(NODE,TREE_OBJ) { return true },
		beforeclose	: function(NODE,TREE_OBJ) { return true },
		// before move   - should return true | false
		beforemove  : function(NODE,REF_NODE,TYPE,TREE_OBJ) { return true }, 
		// before create - should return true | false
		beforecreate: function(NODE,REF_NODE,TYPE,TREE_OBJ) { return true }, 
		// before rename - should return true | false
		beforerename: function(NODE,LANG,TREE_OBJ) { return true }, 
		// before delete - should return true | false
		beforedelete: function(NODE,TREE_OBJ) { return true }, 

		onselect	: function(NODE,TREE_OBJ) { },					// node selected
		ondeselect	: function(NODE,TREE_OBJ) { },					// node deselected
		onchange	: function(NODE,TREE_OBJ) { },					// focus changed
		onrename	: function(NODE,LANG,TREE_OBJ) { },				// node renamed ISNEW - TRUE|FALSE, current language
		onmove		: function(NODE,REF_NODE,TYPE,TREE_OBJ) { },	// move completed (TYPE is BELOW|ABOVE|INSIDE)
		oncopy		: function(NODE,REF_NODE,TYPE,TREE_OBJ) { },	// copy completed (TYPE is BELOW|ABOVE|INSIDE)
		oncreate	: function(NODE,REF_NODE,TYPE,TREE_OBJ) { },	// node created, parent node (TYPE is createat)
		ondelete	: function(NODE, TREE_OBJ) { },					// node deleted
		onopen		: function(NODE, TREE_OBJ) { },					// node opened
		onopen_all	: function(TREE_OBJ) { },						// all nodes opened
		onclose		: function(NODE, TREE_OBJ) { },					// node closed
		error		: function(TEXT, TREE_OBJ) { },					// error occured
		// double click on node - defaults to open/close & select
		ondblclk	: function(NODE, TREE_OBJ) { TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE); TREE_OBJ.select_branch.call(TREE_OBJ, NODE); },
		// right click - to prevent use: EV.preventDefault(); EV.stopPropagation(); return false
		onrgtclk	: function(NODE, TREE_OBJ, EV) { },
		onload		: function(TREE_OBJ) { },
		onfocus		: function(TREE_OBJ) { },
		ondrop		: function(NODE,REF_NODE,TYPE,TREE_OBJ) {}
	}
}</pre>
<h1 id="ddata">Input data format</h1>

<h2 id="data_html">predefined HTML</h2>
<div class="source">without language versions</div>
<pre>&lt;!-- SINGLE NODE --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;<em>node_title</em>&lt;/a&gt;
&lt;/li&gt;

&lt;!-- NODE WITH CHILDREN --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;ul&gt;
		&lt;!-- CHILD NODES --&gt;
	&lt;/ul&gt;
&lt;/li&gt;
</pre>
<div class="source">with language versions</div>
<pre>&lt;!-- SINGLE NODE --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
&lt;/li&gt;

&lt;!-- NODE WITH CHILDREN --&gt;
&lt;li id=&quot;<em>node_identificator</em>&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;a href=&quot;#&quot; class=&quot;<em>language_name</em>&quot;&gt;<em>node_title</em>&lt;/a&gt;
	&lt;ul&gt;
		&lt;!-- CHILD NODES --&gt;
	&lt;/ul&gt;
&lt;/li&gt;
</pre>
<p>&nbsp;</p>
<p class="note">NOTE: if you wish to set a custom icon for a node just use the <span class="var">background-image</span> style property (on the <span class="var">&lt;a&gt;</span> node).</p>


<h2 id="data_xml-nested">nested XML</h2>
<div class="source">WITHOUT language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name [icon=&quot;<em>path_to_icon</em>&quot;]&gt;&lt;![CDATA[<em>node_title</em>]]&gt;&lt;/name&gt;
		&lt;/content&gt;
		&lt;!-- NESTED ITEM NODES --&gt;
	&lt;/item&gt;
&lt;/root&gt;
</pre>
<div class="source">WITH language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
		&lt;/content&gt;
		&lt;!-- NESTED ITEM NODES --&gt;
	&lt;/item&gt;
&lt;/root&gt;
</pre>
<p><br />nbsp;</p>
<p class="note">NOTE:</p>
<ul class="note">
	<li>if the <span class="var">icon</span> attribute (if set) does not contain a <span class="val">"/"</span> the icon is looked up in the current theme directory (so if the icon is in the same folder as the file displaying the tree use <span class="val">"./"</span>)</li>
	<li>if the <span class="var">state</span> attribute is present the node is forced in the specified state</li>
	<li>if the <span class="var">hasChildren</span> attribute is present, the output node is displayed as having children even if it does not (useful for <span class="var">async</span>)</li>
	<li>all other attributes of the <span class="var">item</span> node get copied to the <span class="var">&lt;li&gt;</span> node in the output HTML (for example <span class="var">title</span> or <span class="var">rel</span>)</li>
	<li>all attributes (except <span class="var">language</span> and <span class="var">icon</span>) of the <span class="var">name</span> node get copied to the <span class="var">&lt;a&gt;</span> node in the output HTML (for example <span class="var">href</span>)</li>
</ul>


<h2 id="data_xml-flat">flat XML</h2>
<div class="source">WITHOUT language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; parent_id=&quot;<em>parent_node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name [icon=&quot;<em>path_to_icon</em>&quot;]&gt;&lt;![CDATA[<em>node_title</em>]]&gt;&lt;/name&gt;
		&lt;/content&gt;
	&lt;/item&gt;
	&lt;!-- NEXT ITEM NODES --&gt;
&lt;/root&gt;
</pre>
<div class="source">WITH language versions</div>
<pre>&lt;xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
&lt;root&gt;
	&lt;item id=&quot;<em>node_id</em>&quot; parent_id=&quot;<em>parent_node_id</em>&quot; [state=&quot;<em>closed|open</em>&quot; <em>hasChildren</em>]&gt;
		&lt;content&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
			&lt;name lang=&quot;<em>language_name</em>&quot; [icon=&quot;<em>path_to_icon</em>&quot;]&gt;
				&lt;![CDATA[<em>node_title</em>]]&gt;
			&lt;/name&gt;
		&lt;/content&gt;
	&lt;/item&gt;
	&lt;!-- NEXT ITEM NODES --&gt;
&lt;/root&gt;
</pre>
<p><br />nbsp;</p>
<p class="note">NOTE:</p>
<ul class="note">
	<li>in <span class="var">async</span> mode, do not set the <span class="var">parent_id</span> attribute</li>
	<li>if the <span class="var">icon</span> attribute (if set) does not contain a <span class="val">"/"</span> the icon is looked up in the current theme directory (so if the icon is in the same folder as the file displaying the tree use <span class="val">"./"</span>)</li>
	<li>if the <span class="var">state</span> attribute is present the node is forced in the specified state</li>
	<li>if the <span class="var">hasChildren</span> attribute is present, the output node is displayed as having children even if it does not (useful for <span class="var">async</span>)</li>
	<li>all other attributes of the <span class="var">item</span> node get copied to the <span class="var">&lt;li&gt;</span> node in the output HTML (for example <span class="var">title</span> or <span class="var">rel</span>)</li>
	<li>all attributes (except <span class="var">language</span> and <span class="var">icon</span>) of the <span class="var">name</span> node get copied to the <span class="var">&lt;a&gt;</span> node in the output HTML (for example <span class="var">href</span>)</li>
</ul>


<h2 id="data_json">JSON</h2>
<div class="source">WITHOUT language versions</div>
<pre>{ 
	attributes: { id : &quot;<em>node_identificator</em>&quot;, [<em>attribute</em> : &quot;<em>attribute_value</em>&quot;] }, 
	state: &quot;closed&quot; or &quot;open&quot;, 
	data: &quot;<em>node_title</em>&quot;, 
	children: [ // an array of child nodes objects ]
}
// data can also be in the form
data : { title : &quot;<em>node_title</em>&quot;, icon : &quot;<em>path_to_icon</em>&quot;, attributes : {&quot;<em>key</em>&quot; : &quot;<em>value</em>&quot;, ... } }
</pre>
<div class="source">WITH language versions</div>
<pre>{ 
	attributes: { id : &quot;<em>node_identificator</em>&quot;, [<em>attribute</em> : &quot;<em>attribute_value</em>&quot;] }, 
	state: &quot;closed&quot; or &quot;open&quot;, 
	data: { &quot;language_name&quot; : &quot;<em>node_title</em>&quot;, &quot;language_name&quot; : &quot;<em>node_title</em>&quot;, ... }, 
	children: [ // an array of child nodes objects ]
}
// each item in the data object can also be in the form
&quot;language&quot; : { title : &quot;<em>node_title</em>&quot;, icon : &quot;<em>path_to_icon</em>&quot;, attributes : {&quot;<em>key</em>&quot; : &quot;<em>value</em>&quot;, ... } }
</pre>
<p><br />nbsp;</p>
<p class="note">NOTE:</p>
<ul class="note">
	<li>if <span class="var">path_to_icon</span> (if set) does not contain a <span class="val">"/"</span> the icon is looked up in the current theme directory (so if the icon is in the same folder as the file displaying the tree use <span class="val">"./"</span>)</li>
	<li>if the <span class="var">state</span> property is present the node is forced in the specified state</li>
	<li>all members of the <span class="var">attributes</span> object node get copied to the <span class="var">&lt;li&gt;</span> node in the output HTML as attributes (for example <span class="var">title</span> or <span class="var">rel</span>)</li>
	<li>all <span class="var">attributes</span> in any <span class="var">data</span> object get copied to the <span class="var">&lt;a&gt;</span> node</li>
</ul>

<h1 id="api">API</h1>
<p>Variables and functions bound directly to the <span class="var">tree_component</span> class:</p>
<ul>
	<li>
		<span class="var" id="api_focusInst">$.tree_focused()</span><p>function - accepts no arguments - returns a reference to the currently selected instance.</p><p class="note">Example: bind <span class="var">$.tree_focused().rename()</span> to the F2 key.</p>
	</li>
	<li>
		<span class="var" id="api_mousedown">tree_component.mousedown</span><br />
		<span class="var" id="api_mouseup">tree_component.mouseup</span><br />
		<span class="var" id="api_mousemove">tree_component.mousemove</span><p>These functions are properties of the class since 0.9.5 - they take care of the drag &amp; drop functionality for all tree instances.</p>
	</li>
	<li>
		<span class="var" id="api_drag_drop">tree_component.drag_drop</span><p>An object storing various variables while dragging (since 0.9.6).</p>
		<ul>
			<li><span class="var" id="api_isdown">isdown</span><p>Is there a drag?</p></li>
			<li><span class="var" id="api_drag_node">drag_node</span><p>The node/nodes being dragged.</p></li>
			<li><span class="var" id="api_drag_help">drag_help</span><p>The helper node.</p></li>
			<li><span class="var" id="api_origin_tree">origin_tree</span><p>The tree instance of the origin tree (where the drag began). If the dragged node did not come from a tree (check <a href="#droppable">droppable</a>) it is the tree focused when the drag began.</p></li>
			<li><span class="var" id="api_marker">marker</span><p>The marker for the new position.</p></li>
			<li><span class="var" id="api_move_type">move_type</span><p>The type of the move.</p></li>
			<li><span class="var" id="api_ref_node">ref_node</span><p>The reference node when moving.</p></li>
			<li><span class="var" id="api_appended">appended</span><p>Is the helper appended.</p></li>
			<li><span class="var" id="api_foreign">foreign</span><p>Is is a foreign node that is being dragged (not from a tree).</p></li>
			<li><span class="var" id="api_droppable">droppable</span><p>Array of classes that can be dropped on all tree instances.</p></li>
			<li><span class="var" id="api_open_time">open_time</span><p>Timeout for opening nodes while dragging.</p></li>
			<li><span class="var" id="api_scroll_time">scroll_time</span><p>Timeout for scrolling tree containers while dragging.</p></li>
		</ul>
	</li>
</ul>
<p><br />nbsp;</p>
<p>Variables and functions available in each instance:</p>
<ul>
	<li>VARIABLES
		<p>more useful ones are black</p>
		<ul>
			<li style="color:gray;"><span class="var">cntr</span><p>integer - a counter of all jstree instances - this number is unique with each instance.</p></li>
			<li style="color:gray;"><span class="var">container</span><p>jQuery - the container of the tree (the node you passed at initialization).</p></li>
			<li style="color:gray;"><span class="var">current_lang</span><p>string - the currently visible language (one of the strings you passed at initialization). If no language versions are used this is <span class="val">false</span>.</p></li>
			<li><span class="var" id="api_hovered">hovered</span><p>jQuery - the currently hovered node, but only if set by the <span class="var">hover_branch</span> function. This variable does not update as the mouse hovers nodes. If no node is hovered equals <span class="val">false</span>.</p></li>
			<li style="color:gray;"><span class="var">li_height</span><p>integer - the height of a node (used internally for calculations).</p></li>
			<li style="color:gray;"><span class="var">locked</span><p>boolean - the current lock status of the tree.</p></li>
			<li style="color:gray;"><span class="var">offset</span><p>object - the offset (left &amp; top) of the container.</p></li>
			<li style="color:gray;"><span class="var">opened</span><p>array - a list of ids that are opened. This is used internally and most of the time this array is empty.<br />If you need to track the open nodes - either implement it yourself using the <span class="var">onopen</span> and <span class="var">onclose</span> callbacks or use the COOKIE functionality.</p></li>
			<li><span class="var" id="api_path">path</span><p>string - the path to the tree's files (where you included <span class="file">tree_component.js</span> from).</p></li>
			<li><span class="var" id="api_selected">selected</span><p>jQuery - the object you selected last (when multiselecting this contains only THE LAST selected node).</p></li>
			<li><span class="var" id="api_selected_arr">selected_arr</span><p>array - array of jQuery objects - all the selected nodes (this array exists only id <span class="var">settings.multiple</span> is different from <span class="val">false</span>).</p></li>
			<li style="color:gray;"><span class="var">settings</span><p>object - the object you passed at initialization merged with the defaults (some properties could be modified).</p></li>
			<li style="color:gray;"><span class="var">sn</span><p>string - the sheet number of <span class="file">tree_component.css</span>.</p></li>
		</ul>
	</li>
	<li>FUNCTIONS
		<ul>
			<li><span class="var" id="api_init">init</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>container node, <span class='opt' title='optional'>[OPT]</span>options.<br />The function that initializes the tree and binds all events.</p>
			</li>
			<li><span class="var" id="api_off_height">off_height</span><p><strong>Arguments:</strong> none<br />This function is used only internally. It saves the height of a single node and the offset of the container (relative to the document) in member variables (<span class="var">offset</span> and <span class="var">li_height</span>).</p>
			</li>
			<li><span class="var" id="api_refresh">refresh</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>node to refresh<br />This function refreshes the whole tree (saves the status - open nodes, selected nodes, etc). If you pass a node as an argument only the node's children are refreshed.</p>
			</li>
			<li><span class="var" id="api_parseJSON">parseJSON</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>data<br />This function converts a JSON object (structured acoording to the specification) into the HTML structure required by jsTree.</p>
			</li>
			<li><span class="var" id="api_getJSON">getJSON</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>node to begin from, <span class='opt' title='optional'>[OPT]</span>attributes to collect from the <span class="var">&lt;li&gt;</span> node, <span class='opt' title='optional'>[OPT]</span>attributes to collect from the <span class="var">&lt;a&gt;</span> node, <span class='opt' title='optional'>[OPT]</span>force long JSON format.<br />This function traverses the whole tree and exports it as JSON. Refer do the <a href="#data_json">data sources - JSON section</a> to see the format of the output. If the third argument is not an empty array, or the node has an icon - the long format is used, otherwise - the short. If you prefer to always have the long format - pass the fourth argument as <span class="val">true</span><br />If you specify a node as the first argument, only that node and its children are included in the export, otherwise the whole tree is exported.<br />The second argument defaults to: <span class="var">[</span><span class="val"> "id"</span><span class="var">, </span><span class="val">"rel"</span><span class="var">, </span><span class="val">"class" </span><span class="var">]</span>. If you want to collect other attributes - pass an array like this one as the second argument.<br />The third argument defaults to an empty array.<br />The fourth argument defaults to <span class="val">false</span>.</p>
			</li>
			<li><span class="var" id="api_focus">focus</span><p><strong>Arguments:</strong> none<br />This function focuses the instance it is called from. This function is mainly used internally - in most cases you do not need to call that function.</p>
			</li>
			<li><span class="var" id="api_attachEvents">attachEvents</span><p><strong>Arguments:</strong> none<br />This function should be called only once - it attaches all required events to the tree. You do not need to call this function.</p>
			</li>
			<li><span class="var" id="api_checkMove">checkMove</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node(nodes) that are moved or copied, <span class='req' title='required'>[REQ]</span>reference node, <span class='req' title='required'>[REQ]</span>position <br />This function checks if a move does or does not conflict with the specified rules for the tree. It also checks internal rules specified as metadata. You do not need to call this function. Returns <span class="val">true</span> if a move does not conflict any rules, otherwise <span class="val">false</span>.</p>
			</li>
			<li><span class="var" id="api_reselect">reselect</span><p><strong>Arguments:</strong> none<br />This function is usually called internally after a refresh - it restores the status that was saved before the refresh (scroll position, opened nodes, selected nodes, etc).</p>
			</li>
			<li><span class="var" id="api_get_node">get_node</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node<br />This function returns the jQuery extended copy of the node passed as the first argument if it is a <span class="var">&lt;li&gt;</span> node. Otherwise it searches for the first parent of the passed node that is a list item.</p>
			</li>
			<li><span class="var" id="api_get_type">get_type</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node<br />Return the type of the node passed as the first argument.</p>
			</li>
			<li><span class="var" id="api_scrollCheck">scrollCheck</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>x, <span class='req' title='required'>[REQ]</span>y<br />This function is used internally to scroll the container when the user drags a node near its edge.</p>
			</li>
			<li><span class="var" id="api_check">check</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>rule, <span class='req' title='required'>[REQ]</span>nodes<br />This function checks a node against rules (clickable, draggable, etc). Returns <span class="val">true</span> or <span class="val">false</span> respectively.</p>
			</li>
			<li><span class="var" id="api_hover_branch">hover_branch</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node<br />Sets the node passed as the first argument as hovered.</p>
			</li>
			<li><span class="var" id="api_select_branch">select_branch</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node, <span class='opt' title='optional'>[OPT]</span>is multiselect<br />Selects the node passed as the first argument. If the second argument is set to <span class="val">true</span> the previously selected nodes are not deselected (mutliselect).</p>
			</li>
			<li><span class="var" id="api_deselect_branch">deselect_branch</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node<br />Deselects the node passed as the first argument.</p>
			</li>
			<li><span class="var" id="api_toggle_branch">toggle_branch</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node<br />Toggles the state of the node (opened or closed) passed as the first argument.</p>
			</li>
			<li><span class="var" id="api_open_branch">open_branch</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node, <span class='opt' title='optional'>[OPT]</span>disable animation,  <span class='opt' title='optional'>[OPT]</span>callback function<br />Opens the node passed as the first argument. If the second argument is set to <span class="val">true</span> there is no animation. The third argument can be a function that will be called upon completion (usually this is used only internally - for most need you could use the <span class="var">onopen</span> callback).</p>
			</li>
			<li><span class="var" id="api_close_branch">close_branch</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node<br />Closes the node passed as the first argument.</p>
			</li>
			<li><span class="var" id="api_open_all">open_all</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>node<br />Opens all nodes. If you pass a node as the first argument - all of its subnodes are opened.</p>
			</li>
			<li><span class="var" id="api_close_all">close_all</span><p><strong>Arguments:</strong> none<br />Closes all nodes.</p>
			</li>
			<li><span class="var" id="api_show_lang">show_lang</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>index<br />Switches to the language specified by the index passed as the first argument (the index corresponds to one of the items in the <span class="var">settings.languages</span> array).</p>
			</li>
			<li><span class="var" id="api_cycle_lang">cycle_lang</span><p><strong>Arguments:</strong> none<br />Switches to the next language in the <span class="var">settings.languages</span> array.</p>
			</li>
			<li><span class="var" id="api_create">create</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>type of the new node, <span class='opt' title='optional'>[OPT]</span>where to create the new node, <span class='opt' title='optional'>[OPT]</span>title of the new node, <span class='opt' title='optional'>[OPT]</span>icon, <span class='opt' title='optional'>[OPT]</span>id for the new node<br />Creates a new node in the specified location (the second argument) - if the second argument is not a valid node - then the currently selected node is used. The newly created node has a type, specified by the first parameter, or if not present - the parent node. The title and icon are defined by the third and fourth arguments (if language versions are used those are arrays, if you want you can specify an array for the titles and a string for the icon). If the title argument is not present the default in <span class="var">settings.lang.new_node</span> is used. The final argument is an optional id, if you would like to set an id later you could use the <span class="var">oncreate</span> callback - in it you can save a reference to the node, get data from the server and set the id.</p>
			</li>
			<li><span class="var" id="api_rename">rename</span><p><strong>Arguments:</strong> none<br />Renames the currently selected node.</p>
			</li>
			<li><span class="var" id="api_remove">remove</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>node<br />Removes the node specified in the first argument. If not present - removes the currently selected node.</p>
			</li>
			<li>
				<span class="var" id="api_get_next">get_next</span><br />
				<span class="var">get_prev</span><br />
				<span class="var">get_left</span><br />
				<span class="var">get_right</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>force selection<br />Those functions recreate the standart functionality of the keyboard arrows when browsing a tree, by moving the selection. If <span class="var">settings.ui.hover_mode</span> is set to <span class="val">true</span> they only move the hover state, unless the force argument is set to <span class="val">true</span>.</p>
			</li>
			<li><span class="var" id="api_toggleDots">toggleDots</span><p><strong>Arguments:</strong> none<br />Toggles the dots connecting the nodes.</p>
			</li>
			<li><span class="var" id="api_set_cookie">set_cookie</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>type<br />Set the cookies if the cookie functionality is enabled. The argument is either <span class="val">"selected"</span> or <span class="val">"open"</span> - this defines which cookie to set.</p>
			</li>
			<li><span class="var" id="api_moved">moved</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>node(nodes) that are moved or copied, <span class='req' title='required'>[REQ]</span>reference node, <span class='req' title='required'>[REQ]</span>position, <span class='opt' title='optional'>[OPT]</span>is new, <span class='opt' title='optional'>[OPT]</span>is copy <br />This is the actual function that moves nodes around and performs the cleanup after a move. It is used internally.</p>
			</li>
			<li><span class="var" id="api_error">error</span><p><strong>Arguments:</strong> <span class='opt' title='optional'>[OPT]</span>error message<br />A simple function that only executes the <span class="var">onerror</span> callback and returns false.</p>
			</li>
			<li><span class="var" id="api_lock">lock</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>state<br />This function locks / unlocks the tree (when locked no user interaction is allowed). The state argument is Boolen - <span class="val">true</span> to lock, <span class="val">false</span> to unlock.</p>
			</li>
			<li>
				<span class="var" id="api_cut">cut</span><br />
				<span class="var">copy</span><br />
				<span class="var">paste</span><p><strong>Arguments:</strong> none<br />Those cut/copy functions cut or copy the currently selected nodes, the paste function pastes them in the currently selected node.</p>
			</li>
			<li><span class="var" id="api_search">search</span><p><strong>Arguments:</strong> <span class='req' title='required'>[REQ]</span>search string<br />This function performs a search by opening all parent nodes of nodes which contain the search string. Those nodes receive the class <span class="val">"search"</span>. If <span class="var">settings.data.async</span> is set to <span class="val">true</span>, a request is also made to <span class="var">settings.data.url</span> along with the parameter (GET or POST) <span class="val">"search"</span> containing the search string - the expected response is a list of comma-separated IDs which will be loaded.</p>
			</li>
			<li>
				<span class="var" id="api_context_menu">context_menu</span><p><strong>Arguments:</strong> none<br />Builds the context menu onload and after a refresh.</p>
			</li>
			<li><span class="var" id="api_destroy">destroy</span><p><strong>Arguments:</strong>none<br />This function destroys the instance. It also unbinds all events associated with it. If the instance was focused - the first available instance is focused.</p>
			</li>
		</ul>
	</li>
</ul>

<h1 id="output">Output</h1>
<p>The output basically follows the structure of the HTML data source:</p>
<pre>
&lt;your-container-node class="tree"&gt;
  &lt;ul class="jstree-default jstree-your-theme-name"&gt;
    &lt;li class="open|closed|leaf [your-class-names]" [your-attributes="attribute_values"]&gt;
      &lt;a 
        class="language-of-node [your-class-names]"
        style="[background-image:url(your-icon-name);] [your-styles]" 
        [your-attributes="attribute_values"]&gt;Your node name&lt;/a&gt;
        &lt;ul&gt;
        &lt;!-- CHILD NODES --&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/your-container-node&gt;
</pre>
<p>Your container node get the class <span class="val">tree</span> applied to it. The first <span class="var">&lt;ul&gt;</span> has the class <span class="val">jstree-default</span> and then if different - the name of the theme applied. This ensures that the applied theme's rules override the matching default theme rules.</p>
<p class="note">NOTE that it is not good practice to set the actual <span class="var">&lt;ul&gt;</span> node as the source of the tree (when using predefined HTML).</p>
<p>Each <span class="var">&lt;li&gt;</span> node has one of the classes <span class="val">open</span>, <span class="val">closed</span> or <span class="val">leaf</span>. You can check for those classes in the callback functions, so that you know what node you are dealing with. A <span class="val">leaf</span> node has no children, a <span class="val">closed</span> node has chidren but they are not visible (if there is no <span class="var">&lt;ul&gt;</span> node within this one - the children are not loaded yet), an <span class="val">open</span> node has children, and they are visible.</p>
<p>The count of <span class="var">&lt;a&gt;</span> nodes in each <span class="var">&lt;li&gt;</span> depends on the count of languages for the tree (there is one <span class="var">&lt;a&gt;</span> node for each language, and the node has the language name as a class) (NOTE that only one language is visible at a time). If you do not set the <span class="var">href</span> attribute, a <span class="val">#</span> is set.</p>

<h1 id="cust">Customization using themes</h1>
<p>As of version 0.9.5 jsTree also supports themes - here is a quick intro to themes.</p>
<p>Each theme must reside in its own directory within the themes path.</p>
<p class="note">NOTE: The themes path is either auto-detected (<span class="file">path-to-jstree/themes/</span>), or can be set manually using the <span class="var">settings.ui.theme_path</span> setting.</p>
<p>The theme to use on a tree is set using the <span class="var">settings.ui.theme_name</span> setting - just set it to a string with the name of your directory (for example <span class="var">theme_name : </span><span class="val">"my_theme"</span>).</p>
<p>Each theme consists at minimum of a file called <span class="file">style.css</span> within the theme directory. This file gets included after the default theme file, ensuring that any rules you set (even if the selectors have the same weight as the default theme's selectors) will be respected.</p>
<p>You may also want to include various images in your themes directory, so that you can use them in your <span class="file">style.css</span> file.</p>
<h2 id="classic-walk">Classic theme walkthrough</h2>
<p>Here is a walkthrough of the classic theme (included). The most important part is the <span class="file">style.css</span> file.</p>
<div class='source'>The classic theme</div>
<pre>
/* 
 * Note all selectors begin with <u>.tree .tree-classic</u>
 * This is necessary - keep to this format. 
 * Just replace <u>classic</u> with your theme name .
 */

/* Setting the icon infront of every closed node */
.tree .tree-classic li.open {
	background:url("minus.gif") 2px 5px no-repeat;
}
/* Setting the icon infront of every open node */
.tree .tree-classic li.closed {
	background:url("plus.gif") 2px 5px no-repeat;
}
/* This should be same as above.
 * Used to "close" nested nodes while dragging */
.tree .tree-classic #dragged li.open {
	background:url("plus.gif") 2px 5px no-repeat;
}

/* The opened folder icon */
.tree .tree-classic li.open a {
	background-image:url("folderopen.gif");
}
/* The closed folder icon */
.tree .tree-classic li.closed a {
	background-image:url("folder.gif");
}
/* The icon used for nodes with no children */
.tree .tree-classic li.leaf a {
	background-image:url("folder.gif");
}
/* If you want one icon for all above three states use this selector:
 * <u>.tree .tree-classic li a</u> 
 * It is also useful for setting the text color */

/* The default theme has round borders in firefox. 
 * Undo that if you want */
.tree .tree-classic li a {
	-moz-border-radius:0;
}

/* The colors used on the hovered node. 
 * Here they match the background color - so no hover.
 * Note the second selector - it is applied when <u>hover_mode</u> is <u>on</u> 
 * and you use the <u>get_*</u> functions (mainly used for keyboard shortcuts) */
.tree .tree-classic li a:hover,
.tree .tree-classic li a.hover {
	background-color:white;
	border-color:white;
}
/* The colors for the selected state of the node */
.tree .tree-classic li a.clicked,
.tree .tree-classic li span.clicked {
	background-color:navy;
	border-color:navy;
	color:white;
}

/* What follows here are the styles for right-to-left alignment 
 * Include such styles only of you want to support RTL languages */
.rtl .tree-classic li.open {
	background-position:right 5px;
	margin-right:-3px;
	padding-right:19px;
}
.rtl .tree-classic li.closed {
	background-position:right 5px;
	margin-right:-3px;
	padding-right:19px;
}
.rtl .tree-classic #dragged li.open {
	background-position: right 5px;
}
</pre>
<h2 id="customize-further">Other customizations</h2>
<p>The above part does not cover enlarging fonts, or changing the tree background - here is how you do it:</p>
<div class='source'>Font size/family &amp; height</div>
<pre>
.tree .tree-classic li {
	font-size:11px;
	line-height:20px;
	min-height:20px;
	font-family:Georgia;
}
.tree .tree-classic li a {
	line-height:18px;
	height:18px;
}
</pre>
<div class='source'>Context menu</div>
<pre>
/* Using this selector you can set 
 * background, width, etc.
 * Below are the defaults. */
.tree .tree-default .context {
	width:160px;
	background:#F0F0F0 url("context.jpg") 22px 0 repeat-y;
	border:1px solid silver;
}
/* The actual items in the context menu.
 * Below are the defaults. */
.tree .tree-default .context a, 
.tree .tree-default .context a.disabled:hover {
	text-decoration:none;
	color:black;
	text-indent:26px;
	line-height:20px;
	background-repeat: no-repeat;
	background-position: 3px center;
	padding:1px 0;
	background-color:transparent;
	border:0;
}
.tree .tree-default .context a:hover {
	background-color: #e7f4f9;
	border:1px solid #d8f0fa;
	background-position: 2px center;
	padding:0;
	text-indent:25px;
}
/* The disabled state */
.tree .tree-default .context a.disabled,
.tree .tree-default .context a.disabled:hover {
	color:silver;
}
/* The separator.
 * Below are the defaults. */
.tree .tree-default .context .separator {
	background:#FFFFFF;;
	border-top:1px solid #E0E0E0;
	font-size:1px;
	height:1px;
	line-height:1px;
	margin:0 2px 0 24px;
	min-height:1px;
	display:block;
}
</pre>
<div class='source'>Background color</div>
<pre>
.tree,
.tree ul, 
.tree li.last {
	background-color:#666 !important;
}
</pre>
<p>As of v.0.9.6 you can set any background you like (including images and repeat).</p>
</div>

</body>
</html>
